<template>
  <div class="profile-container">
    <NavigationBar />
    
    <main class="profile-content">
      <h1 class="profile-title">个人中心</h1>
      
      <div v-if="isAuthenticated" class="profile-card">
        <div class="avatar-container">
          <img 
            :src="userProfile.avatar || 'https://via.placeholder.com/150'" 
            alt="用户头像" 
            class="avatar"
          >
          <button @click="changeAvatar" class="avatar-edit-btn">
            <i class="fas fa-camera"></i>
          </button>
        </div>
        
        <div class="profile-info">
          <div class="info-item">
            <label>用户名:</label>
            <span>{{ userProfile.username }}</span>
          </div>
          <div class="info-item">
            <label>邮箱:</label>
            <span>{{ userProfile.email }}</span>
          </div>
          <div class="info-item">
            <label>注册时间:</label>
            <span>{{ formatDate(userProfile.createdAt) }}</span>
          </div>
        </div>
        
        <div class="profile-actions">
          <button @click="editProfile" class="edit-btn">
            <i class="fas fa-edit"></i> 编辑资料
          </button>
          <button @click="logout" class="logout-btn">
            <i class="fas fa-sign-out-alt"></i> 退出登录
          </button>
        </div>
      </div>
      
      <div v-else class="login-prompt">
        <p>请先登录查看个人中心</p>
        <button @click="goToLogin" class="login-btn">
          <i class="fas fa-sign-in-alt"></i> 前往登录
        </button>
      </div>
    </main>
    
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import NavigationBar from '@/components/NavigationBar.vue'
import Footer from '@/components/Footer.vue'
import { fetchUserProfile, logoutUser } from '@/api/auth'

const router = useRouter()
// 封装请求方法
let csrfToken = null

const getCsrfToken = async () => {
  const res = await fetch('/api/csrf-token')
  const data = await res.json()
  csrfToken = data.csrfToken
}

// 在应用初始化时获取
getCsrfToken()
const isAuthenticated = ref(false)
const userProfile = ref({
  username: '',
  email: '',
  avatar: '',
  createdAt: new Date()
})

// 获取用户资料
const loadProfile = async () => {
  try {
    const response = await fetchUserProfile()
    if (response.success) {
      userProfile.value = response.data
      isAuthenticated.value = true
    }
  } catch (error) {
    console.error('获取用户资料失败:', error)
  }
}

// 编辑资料
const editProfile = () => {
  router.push('/profile/edit')
}

// 更换头像
const changeAvatar = () => {
  console.log('更换头像')
}

// 退出登录
const logout = async () => {
  try {
    await logoutUser()
    isAuthenticated.value = false
    router.push('/login')
  } catch (error) {
    console.error('退出登录失败:', error)
  }
}

// 前往登录
const goToLogin = () => {
  router.push('/login')
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

onMounted(() => {
  loadProfile()
})
</script>

<style scoped>
.profile-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.profile-content {
  flex: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
  width: 100%;
}

.profile-title {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
}

.profile-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.avatar-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 1.5rem;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #42b983;
}

.avatar-edit-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #42b983;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar-edit-btn:hover {
  background-color: #3aa876;
}

.profile-info {
  margin-bottom: 2rem;
}

.info-item {
  display: flex;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.info-item label {
  font-weight: 600;
  color: #555;
  min-width: 100px;
}

.info-item span {
  color: #333;
}

.profile-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.edit-btn {
  background-color: #42b983;
  color: white;
}

.edit-btn:hover {
  background-color: #3aa876;
  transform: translateY(-2px);
}

.logout-btn {
  background-color: #f44336;
  color: white;
}

.logout-btn:hover {
  background-color: #e53935;
  transform: translateY(-2px);
}

.login-prompt {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.login-prompt p {
  color: #666;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.login-btn {
  background-color: #42b983;
  color: white;
  margin: 0 auto;
}

.login-btn:hover {
  background-color: #3aa876;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .profile-actions {
    flex-direction: column;
  }
  
  button {
    width: 100%;
    justify-content: center;
  }
}
</style>